<template>
  <div class="com-container">
    <div class="com-chart" ref="seller_ref"></div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    name: "Seller",
    data() {
      return{
        chartInstance:null,
        allData:null,
        cuurentPage:1,
        totalPage:0,
        timeid:null
      }
    },
    methods:{
      initChart(){
        this.chartInstance=this.$echarts.init(this.$refs.seller_ref,this.theme)
        //图标初始化
        const initOption={
          title: {
            text:'| 商家销售统计',
            textStyle:{
              fontSize:66
            },
            left:20,
            top: 20
          },
          grid:{  //总体样式
            top:"20%",
            left:'6%',
            right:'3%',
            bottom:'3%',
            containLabel:true//包含对称轴的文字
          },
          xAxis:{
            type:'value',
          },
          yAxis:{
            type:'category',
          },
          tooltip:{  //提示
            trigger:'axis',
            axisPointer:{
              type:'line',
              z:0,
              // lineStyle:{
              //   width:66,
              //   color:'#2D3443'
              // }
            }
          },
          series:[
            {
              type:'bar',
              barWidth:66,   //柱子宽度
              label:{ //z柱子文字样式
                show:true,
                position:'right'
              },
              itemStyle:{
                barBorderRadius:[0,33,33,0],
                color:new this.$echarts.graphic.LinearGradient(0,0,1,0,[
                  {
                    offset:0,  //0%
                    color:'#5052EE'
                  },
                  {
                    offset:1, //100%
                    color:'#AB6EE5'
                  }
                ])
              }
            }
          ]
        }
        this.chartInstance.setOption(initOption)
        this.chartInstance.on('mouseover',()=>{
          clearInterval(this.timeid)
        })
        this.chartInstance.on('mouseout',()=>{
          this.statrInterval()
        })

      },
       getData(getdata){
         // let {data:getdata}=await this.$http.get('/seller',{
         // })
        this.allData=getdata
        this.allData.sort((a,b)=>{
          return b.value-a.value
        })
         //五个显示一页
         this.totalPage=Math.ceil(this.allData.length/5)//向上取整
         this.undateChart()
        this.statrInterval()
      },
      undateChart(){
        const start=(this.cuurentPage-1)*5
        const  end=this.cuurentPage*5
        const showdata=this.allData.slice(start,end)
        const  sellerNames=showdata.map((item)=>{
          return item.name
        })
        const  sellerValue=showdata.map((item)=>{
          return item.value
        })
        const dataoption={
          yAxis:{
            data:sellerNames,
          },
          series:[
            {
              data:sellerValue,
            }
          ]
        }
        this.chartInstance.setOption(dataoption)
      },
      statrInterval(){
        if (this.timeid){
          clearInterval(this.timeid)
        }
        this.timeid=setInterval(()=>{
          this.cuurentPage++
          if (this.cuurentPage>this.totalPage)
          {
            this.cuurentPage=1
          }
          this.undateChart()
        },3000)
      },
      //分辨率适配
      screenAdapter(){
        // console.log(this.$refs.seller_ref.offsetWidth);
        const titleFontSize=this.$refs.seller_ref.offsetWidth/100*3.6
        const adapterOption={
          title: {
            textStyle:{
              fontSize:titleFontSize
            },
          },
          tooltip:{  //提示
            axisPointer:{
              lineStyle:{
                width:titleFontSize,
              }
            }
          },
          series:[
            {
              barWidth:titleFontSize,   //柱子宽度
              itemStyle:{
                barBorderRadius:[0,titleFontSize/2,titleFontSize/2,0]
              }
            }
          ]
        }
        this.chartInstance.setOption(adapterOption)
        this.chartInstance.resize()
      }
    },
    mounted(){
      this.initChart()
      // this.getData()
      this.$socket.send({
        action: 'getData',
        socketType: 'sellerData',
        chartName: 'seller',
        value: ''
      })
      window.addEventListener('resize',this.screenAdapter)
      this.screenAdapter()
    },
    created() {

      this.$socket.registerCallBack('sellerData', this.getData)
    },
    destroyed() {
      clearInterval(this.timeid)
      window.removeEventListener('resize',this.screenAdapter)
      this.$socket.unRegisterCallBack('sellerData')
    },
    computed:{
      ...mapState(['theme'])
    },
    watch:{
      theme(){
        // console.log('切换主题');
        this.chartInstance.dispose()
        this.initChart()
        this.screenAdapter()
        this.undateChart()
      }
    }
  }
</script>

<style  scoped lang="less">

</style>
